<template>
  <div class="child1">
    <h3>子组件1</h3>
    <h4>玩具：{{ toy }}</h4>
    <h4>书籍: {{ book }}本</h4>
    <button @click="minusHouse($parent)">干掉父亲的一套房产</button>
  </div>
</template>

<script setup lang="ts" name="Child1">
import { ref } from "vue";

let toy = ref("奥特曼");
let book = ref(3);

// 修改父组件中的数据,实现 子组件->父组件间的通信
function minusHouse(parent: any) {
  console.log(parent);
	// 在子组件中操作父组件的数据
  parent.house--;
}

// 使用defineExpose 暴露数据供父组件使用ref进行访问
defineExpose({ toy, book });
</script>

<style scoped>
.child1 {
  margin-top: 20px;
  background-color: skyblue;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px black;
}
</style>
